@import '~@/theme';

.steps {
  width: 100%;
  max-width: 800px;
}

.show-content-item {
  border-radius: @border-radius-base;
  border: 1px solid @border-color-base;
  margin-bottom: 16px;

  .toolbar {
    height: 32px;
    padding: 8px 8px 0;
  }
}

.benefit-table {
  min-width: 720px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  border: 1px solid #f0f0f0;

  .table-cell {
    font-size: 14px;
    line-height: 20px;
    color: #222;
    text-align: left;
    padding: 8px 16px;
    min-height: 48px;
    border-right: 1px solid #f0f0f0;
    background-color: #fff;
    transition: background-color 0.12s ease-out;
    box-sizing: border-box;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;

    &:last-child {
      border-right: 0;
    }
  }

  .table-head,
  .table-row {
    display: flex;
    flex-direction: row;
    flex-flow: row nowrap;
    align-items: stretch;
    width: 100%;
  }

  .table-head .table-cell {
    color: #424242;
    background-color: #fafafa;
  }

  .table-cell.editing {
    padding: 4px;
  }

  .table-row.dragging .table-cell {
    background-color: @primary-2;
  }

  .table-head,
  .table-row {
    border-bottom: 1px solid #f0f0f0;

    &:last-child {
      border-bottom: 0;
    }
  }

  .table-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
  }

  .info .edit-icon {
    opacity: 0;
    display: inline-block;
    transition: opacity 0.12s ease-out;
  }

  .info:hover .edit-icon {
    opacity: 1;
  }
}
